<template>
  <mark-line
      :timeConfig="{ time: currentTime, color: 'rgba(255,0,0,.4)' }"
      :getPositionOffset="getPositionOffset"
  ></mark-line>
</template>

<script setup lang="ts">
import {ref, onMounted, onBeforeUnmount, PropType} from 'vue';
import dayjs from 'dayjs';
import MarkLine from './index.vue';

// 假设 getPositionOffset 是从父组件传递下来的 prop
const props = defineProps({
  getPositionOffset: {
    type: Function as PropType<(date: string) => number>,
    required: true
  },
});

// 使用 ref 来创建响应式数据
const currentTime = ref(dayjs().toString());

// 更新当前时间的函数
const updateCurrentTime = () => {
  currentTime.value = dayjs().toString();
  // 注意：这里移除了 $bus.emit，因为 Vue 3 不再推荐使用全局事件总线
  // 如果你需要在其他组件中响应这个时间更新，考虑使用 Vuex/Pinia 或通过 props/emit 传递
};

// 在组件挂载时设置定时器
onMounted(() => {
  const timeNow = setInterval(updateCurrentTime, 1000);

  // 在组件卸载前清除定时器
  onBeforeUnmount(() => {
    clearInterval(timeNow);
  });
});
</script>

<style scoped>
/* 你的样式 */
</style>
